<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post">
			你爱好的运动是？
			<input type="checkbox" id="inputcheck1"/>全选/全不选<br />
			<input type="checkbox" name="items" value="足球"/>足球
			<input type="checkbox" name="items" value="篮球"/>篮球
			<input type="checkbox" name="items" value="乒乓球"/>乒乓球
			<input type="checkbox" name="items" value="羽毛球"/>羽毛球
			<br />
			<input type="button" id="inputbutton1" value="全选"/>
			<input type="button" id="inputbutton2" value="全不选"/>
			<input type="button" id="inputbutton3" value="反选"/>
			<input type="button" id="inputbutton4" value="提交"/>
		</form>
		<script type="text/javascript">
			var check = document.getElementById("inputcheck1");
			var but1 = document.getElementById("inputbutton1");
			var but2 = document.getElementById("inputbutton2");
			var but3 = document.getElementById("inputbutton3");
			var but4 = document.getElementById("inputbutton4");
			var item = document.getElementsByName("items");
			check.onclick = function(){
				for(var a = 0 ; a < item.length ; a++){
					item[a].checked = check.checked;
				}
			}
			but1.onclick = function(){
				for(var a = 0 ; a < item.length ; a++){
					item[a].checked = true;
					check.checked = true;
				}
			}
			but2.onclick = function(){
				for(var a = 0 ; a < item.length ; a++){
					item[a].checked = false;
					check.checked = false;
				}
			}
			but3.onclick = function(){
				for(var a = 0 ; a < item.length ; a++){
					check.checked = true;
					item[a].checked = !item[a].checked;
					if(!item[a].checked){
						check.checked = false;
					}
				}
				
			}
			but4.onclick = function(){
				for( var a = 0 ; a < item.length ; a++){
					if(item[a].checked == true){
						alert(item[a].value);
					}
				}
			}
			for( var a = 0 ; a< item.length ; a++){
				item[a].onclick = function(){
					for(var j = 0 ; j < item.length ; j++){
						if(!item[j].checked){
							check.checked = false;
							return;
						}
					}
					check.checked = true;
				}
			}
		</script>
	</body>
</html>
